<template>
	<view class="order-address-container">
		<view class="order-address-block">
			<view class="info">
				<view class="icon iconfont">&#xe61d;</view>
				<view class="name">{{addressInfo.receiver}} </view>
				<view class="phone">{{addressInfo.phone}}</view>
			</view>
			<view class="ads">
				<text class="txt">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}{{addressInfo.address}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	/**
	 * 收货地址
	 * @property {Object} stOrderAddress
	 * 
	 */
	export default {
		name: 'stOrderAddress',
		props:{
			addressInfo: {
				type: Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {}
		},
		methods: {}
	}
</script>
<style lang="scss">
.order-address-container{
	padding: 0 24rpx;
	margin-bottom: 20rpx;
	.order-address-block{
		padding: 22rpx 24rpx;
		border-radius: 20rpx;
		background-color: $uni-bg-color;
		.info{
			@extend .alignItems;
			.icon{
				font-size: 40rpx;
				background: linear-gradient(90deg, #FF3617 0%, #FF662A 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				text-fill-color: transparent;
			}
			.name{
				font-size: $uni-font-size-base;
				font-weight: bold;
				margin-left: 10rpx;
			}
			.phone{
				color: $uni-text-color-grey;
				margin-left: 14rpx;
				font-size: $uni-font-size-sm;
			}
		}
		.ads{
			display: flex;
			justify-content: space-between;
			margin: 12rpx 0 0 50rpx;
			.txt{
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				line-height: 1.5;
			}
		}
	}
}
</style>
